<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body class="body">
  <!-- 视频预览盒子 -->
  <div class="videobox">
    <video id="video" src="#">
    </video>
    <!-- 后退 -->
    <i id="back" class="iconfont icon-zuojiantou"></i>
    <!-- 播放 -->
    <i id="play" class="iconfont icon-yunhang"><span>视频预览</span></i>
    <!-- 预览 -->
    <span></span>
  </div>
  <!-- 下部详情盒子 -->
  <div class="detail">
    <h1 id="titel"></h1>
    <p class="detail_num">
      <span class="group_1">
        <span id="calorie" class="calorie"></span>
        <span>千卡</span>
        <span id="time" class="time">99</span>
        <span>分钟</span>
      </span>
      <span class="group_2">
        <span id="peoplenum" class="peoplenum"></span>
        <span>w人练过 ></span>
      </span>
    </p>
    <!-- 用户数据 -->
    <div class="user_detial">
      <!-- 头像 -->
      <div class="via"></div>
      <!-- 用户数据 -->
      <div class="user_name">
        <p>刘海柱</p>
        <p>近战法师</p>
      </div>
      <button>+关注</button>
    </div>
    <!-- 详情描述 -->
    <div class="describe">
      <span id="describeContent" class="describe_content"></span><span id="more" class="more">更多</span>
    </div>
    <!-- 练习频次 -->
    <div class="practice">
      <!-- 频次 -->
      <div>
        <span class="iconfont icon-chouti">练习频次</span>
        <span>每周<span id="frequency" class="frequency"></span>次</span>
      </div>
      <!-- 器械 -->
      <div>
        <span class="iconfont icon-tubiaozhizuomoban">器械</span>
        <span id="instrument" class="instrument"></span>
      </div>
    </div>
    <div id="button" class="button">
      开始训练
    </div>
  </div>
</body>

</html>